<template>
  <epgis-nav-container title="注册">
    <template #container>
      
      <div style= "height: 100%; width: 100%;background: white;" class="layoutVerticle">
        <div class="layoutHorizontal layoutCenter" style="margin-top: 80px;">
          <img src="@/assets/icon/register/location.png"/>
        </div>
        <div class="layoutVerticle layoutCenter">
          <span style=" font-size: 16px; font-weight: bold; margin-top: 20px;">请选择你的居住城市</span>
          <span style="font-size: 14px; margin-top: 10px;">优先推荐本地的{{recommentSex}}</span>
        </div>

        <div   class="layoutVerticle layoutCenter inputBorder" style=" margin-left: 25%;  margin-right: 25%; margin-top: 40px;font-size: 18px;">
          <van-field  @focus="selectCity" v-model="cityName"  :disabled ="isBirthdayDisabled" label="" type="textarea" rows="1" autosize="" placeholder="点击选择你的城市">
          </van-field>
        </div>

        <div @click="nextStep"  class="layoutVerticle layoutCenter " style="position: absolute;bottom: 68px; left: 0; right: 0; margin: 0 auto;">
          <img src="@/assets/icon/register/next.png"/>
        </div>
      </div>

      <van-popup v-model="isCityPopup" position="bottom">
        <van-area title="城市选择" 
          :area-list="areaList"   
          @confirm="confirmPopup"
          @cancel="isCityPopup=false" />
      </van-popup>
    </template>
  </epgis-nav-container>
</template>

<script>
import { Http, Uploader } from "@/common/HttpClient";
import { MapUtil } from "@/common/mapUtil";
import { NativeUtil } from "@/common/utils";
import * as turf from "@turf/turf";
import { Toast, Notify } from "vant";
// 引入areaList对应的js文件
import   { areaList } from "@/assets/arealist/Area.js"

export default {
  components: {},
  data() {
    return {
      recommentSex:'',
      SEX_BOY:'1',
      SEX_GIRL:'2',
      cityName:'',
      cityCode:'',
      isCityPopup:false,
      isBirthdayDisabled:false,
      registMsg:{},
      areaList:areaList,
    };
  },

  mounted() {

  },
  destroyed() {
  },
  activated() {
    console.log("城市数据：", areaList);
    this.registMsg = sessionStorage.getItem("registMsg");
    if(this.registMsg ){
      this.registMsg = JSON.parse(this.registMsg);
    }
    var sex = this.registMsg['sex'];
    console.log("性别：" + sex);
    if(sex == this.SEX_BOY){
      console.log("性别：女生");
      this.recommentSex = '女生';
    } else if(sex == this.SEX_GIRL){
      this.recommentSex = '男生';
       console.log("性别：男生");
    }
  },
  methods: {

    nextStep() {
      if(this.checkValue()){
        this.registMsg['cityName'] = this.cityName;
        this.registMsg['cityCode'] = this.cityCode;
        sessionStorage.setItem("registMsg",JSON.stringify(this.registMsg));
        this.$router.push({ name: 'RegisterPassword' });
      }
    },

    checkValue(){
      if (!this.cityName) {
        Notify({
            type: "danger",
            message: "请选择你的居住城市",
        });
        return false;
      }
      return true;
    },

    confirmPopup(data) {
      console.log("城市：" + JSON.stringify(data));
      this.isCityPopup = false;
      this.cityName = data[2]['name'];
      this.cityCode = data[2]['code'];
    },

    selectCity(){
      console.log("点击111");
      document.activeElement.blur();
      this.isCityPopup = true;
    },





  },
};
</script>

<style lang="less" scoped>

  .layoutVerticle{
    display: flex;
    flex-direction: column;
  }

  .layoutHorizontal{
    display: flex;
    flex-direction: row;
  }

  .layoutCenter{
    justify-content: center;
    align-items: center;
  }
  .inputBorder{
    position: relative;
    padding: 8px 0px;
    &::after{
      position: absolute;
      box-sizing: border-box;
      content: '';
      pointer-events: none;
      bottom: 0%;
      border-bottom: 1px solid #ebedf0;
      width: 100%;
    }
    /deep/.van-field__control{
      font-size: 16px;
    }
  }

  /deep/.van-cell {
    padding: 0px 0px;
  }

  /deep/.van-field__control::-webkit-input-placeholder {
      color: #666666;
      font-weight: 600;
  }

  /deep/.van-field__control {
    text-align: center;
  }






</style>